import { useTypedSelector } from "@store/index";
import { selectAuth } from "@store/slices/authSlice";
import { Navigate, Outlet } from "react-router-dom";
import React from "react";

interface Props {
  // 规定 children 必须是可以渲染的 React 元素
  children?: React.ReactElement;
}

export default function AuthRoute({ children }: Props) {
  // 获取本地存储的用户登录凭据
  const token = useTypedSelector(selectAuth).token;
  // 如果登录凭据不存在跳转到登录页面
  if (typeof token === "undefined") return <Navigate to={"/login"} />;
  // 如果 children 存在渲染 children
  if (typeof children !== "undefined") return children;
  // 否则渲染路由插座
  return <Outlet />;
}